import { Application} from '@pixi/app'
import { utils, Ticker } from '@pixi/core'
import {Container} from '@pixi/display'
import {Graphics} from '@pixi/graphics'
import {ColorGradientFilter} from 'pixi-filters'

let dpr = window.devicePixelRatio

async function init() {
  const div = document.getElementById('app')

  const app = new Application({
    width: 600,
    height: 900,
    backgroundColor: "#1099bb",
    backgroundAlpha: 1,
    resolution: dpr,
    hello: true,
    antialias: true,
    autoDensity: true,
  })

  let c = new Container();
  let width = 100;

  let g = new Graphics()
  g.lineStyle({
    width: 4,
    color: 0xff00ff,
    alpha: 1,
    alignment: 0,
  })
  g.moveTo(0, 0)
  g.lineTo(30, 0)
  g.lineTo(40, 0)
  g.lineTo(width, 0)
  g.lineTo(width, width)
  g.lineTo(0, width)
  g.lineTo(0, 0)

  let f = new ColorGradientFilter({
    alpha: 1,
    stops: [
      {offset: 0, color: '#00ff00', alpha: 1},
      {offset: 1, color: '#0000ff', alpha: 1}
    ]
  } as any)
  f.resolution = dpr
  g.filters = [f]

  let g1 = new Graphics()
  g1.beginFill(0xf11100, 1)
  g1.drawRect(0, 0, width, width)
  g1.endFill()

  c.addChild(g1,g)
  c.x = 100
  c.y = 100

  app.stage.addChild(c)

  div?.append(app.view as any);
  Object.assign(globalThis, {
    __PIXI_APP__: app,
    pixi_utils: utils
  });
}

// initWebgl()
init()